<template>
  <div>
    <div class="pc">
      <!-- <div class="product_nav"></div>
      <div class="product_banner"></div>-->
      <integral-banner></integral-banner>
      <!-- 行业资讯 -->
      <div class="indu_infomation">
        <div class="infomation_contant">
          <div class="headline">
            <h2>产品优势</h2>
            <span>一站式服务助力用户迈向辉煌，每一个环节我们都是精益求精</span>
          </div>
          <ul>
            <li v-for="(item,index) in infomationlist" @click="toinfodetail(item.id)" :key="index">
              <div class="pic">
                <img class="pic_img" :src="item.cover" alt />
              </div>
              <div class="right">
                <div class="right_t">
                  <div class="title">{{item.title}}</div>
                  <div class="date">{{item.date}}</div>
                </div>
                <div class="right_b">
                  <div v-html="item.content"></div>
                </div>
              </div>
              <div class="animate"></div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 消息列表 -->
      <div :class=" ['mpi', twoshow ? 'mpi_i' : ''] " id="two">
        <div class="mpi_item" v-for="(item,index) in mpilistinfo" :key="index" @click="todetail">
          <div class="left">
            <div class="top">{{item.month}}/{{item.day}}</div>
            <div class="bot">{{item.year}}</div>
          </div>
          <div class="right">
            <h4>{{item.title}}</h4>
            <div class="ht_content">
              <div v-html="item.content"></div>
            </div>
          </div>
          <div class="mpi_line"></div>
        </div>
      </div>
      <div class="nation">
        <!-- <pa-ging :last="last_page" :page="current_page"></pa-ging> -->
        <page-nation
          :total="mpilistinfo.total"
          :current-page="mpilistinfo.current_page"
          @pagechange="pagechange"
        ></page-nation>
      </div>
    </div>
    <!-- 移动端 -->
    <m-industry></m-industry>
  </div>
</template>

<script>
import integralBanner from "@/components/integralbanner/integralbanner.vue";
// import paGing from "@/components/paging/paging.vue";
import pageNation from "@/components/paging/pagination.vue";
import mIndustry from "./mindustry";
export default {
  components: {
    integralBanner,
    // paGing,
    mIndustry,
    pageNation
  },
  data() {
    return {
      total: 150, // 记录总条数
      display: 10, // 每页显示条数
      current: 1, // 当前的页数
      // last_page: 5,
      current_page: 2,
      page: 2,
      infomation: {},
      infomationlist: [],
      mpilist: [
        {
          year: "2019",
          date: "02/15",
          h3: "建设银行原接收验证码兑换方式恢复",
          mpimessage:
            "【积分兑了么】重要提示：建设银行原接收验证码兑换方式恢复无需自己操作、只需接收两个验证码轻松兑换、秒到账、秒提现兑..."
        },
        {
          year: "2019",
          date: "02/15",
          h3: "建设银行原接收验证码兑换方式恢复",
          mpimessage:
            "【积分兑了么】重要提示：建设银行原接收验证码兑换方式恢复无需自己操作、只需接收两个验证码轻松兑换、秒到账、秒提现兑..."
        }
      ],
      mpilistinfo: [],
      pageheight: "", //网页可视区的高度
      twoshow: false,
      twoheight: "",
      infolist_two:[]
    };
  },
  mounted() {
    let that = this;
    this.twotop();
    this.pageheight = document.documentElement.clientHeight;
    window.addEventListener("scroll", that.handleScroll);
    that.getList();
    this.getTlist()
  },

  methods: {
    // 获取文章列表
    getList() {
      this.ajax("web/getArticleList", {
        success: res => {
          window.console.log(111)

       
          let infomation = res.msg.data;
          window.console.log(infomation)
          infomation.forEach(el => {
            let date = el.update_time;
            date = date.split(" ")[0];
            el.date = date;
            date = date.split("-");
            el.year = date[0];
            el.month = date[1];
            el.day = date[2];
            // window.console.log(date)
          });
          // window.console.log(res)
          // let topInfo = infomation.slice(0, 4);
          // this.infomationlist = topInfo;
          // let botinfo = infomation.slice(3);
          // this.mpilistinfo = botinfo;
          this.mpilistinfo = res.msg.data;
          window.console.log(this.infomation);
          // let date = res.msg.data.update_time
          // // date =date.split(' ')
        }
      });
    },
    getTlist () {
      this.ajax ("web/getFourArtic", {
        success : res => {
        //  window.console.log(res);
         let infomation = res.msg;
          infomation.forEach(el => {
            let date = el.update_time;
            date = date.split(" ")[0];
            el.date = date;
            date = date.split("-");
            el.year = date[0];
            el.month = date[1];
            el.day = date[2];
          });
          this.infomationlist = res.msg;
          // window.console.log(this.infomationlist);

     
        }
      })
    },
    handleScroll() {
      // eslint-disable-next-line no-undef
      let scrollTop = document.documentElement.scrollTop;
      // console.log(scrollTop);
      // console.log(scrollTop);
      // console.log(this.twoheight);
      // console.log(this.pageheight);
      // console.log(document.documentElement.scrollTop); //页面滚动得距离
      // let height = scrollTop - this.pageheight;
      if (scrollTop > this.twoheight - this.pageheight) {
        this.twoshow = true;
      }
    },
    twotop() {
      var two = document.getElementById("two");
      this.twoheight = two.offsetTop;

      // console.log(two.getBoundingClientRect().top); //元素距离可视区顶部的距离
    },
    pagechange: key => {
      // console.log(currentPage);
      this.ajax("web/getArticleList", {
        data: { page: key },
        success: res => {
          window.console.log(res);
          let infomation = res.msg.data;
          infomation.forEach(el => {
            let date = el.update_time;
            date = date.split(" ")[0];
            el.date = date;
            date = date.split("-");
            el.year = date[0];
            el.month = date[1];
            el.day = date[2];
          });
          let topInfo = infomation.slice(0, 4);
          this.infomationlist = topInfo;
          let botinfo = infomation.slice(3);
          this.mpilistinfo = botinfo;
          this.infomation = res.msg;
          window.console.log(this.infomation);
        }
      });
    },
    todetail() {
      this.$router.push("/industry/detail");
    },
    //资讯详情
    toinfodetail(key) {
      this.$router.push("/industry/detail?id=" + key);
    }
  }
};
</script>

<style lang="scss" scoped>
@import url("../../assets/scss/industry/industry.css");
</style>